<form name="base.baseForm" novalidate>
    <div class="row-box">
        <div class="row-box-desc">
            <div>常规配置</div>
        </div>
        <div class="row-box-form">
            <div class="row">
                <div class="col-md-7">
                    <div ng-if="::!service.serviceId" class="form-group" ng-class="{'has-error': (base.baseForm.podAppName.$touched || base.baseForm.$submitted )
                         && (base.baseForm.podAppName.$error.pattern || base.baseForm.podAppName.$error.required || base.baseForm.podAppName.$error.duplicate)}">
                        <label for="podAppName">服务名 <i ng-show="service.serviceCodeChecking" class="fa-fw fa fa-refresh fa-spin"></i></label>
                        <input type="text" maxlength="50" ng-model="base.podAppName" class="form-control" id="podAppName"
                               name="podAppName" placeholder="请输入服务名" ng-pattern="/^[\w-]+$/" ng-blur="service.checkServiceValidate(base)" required/>
                        <div class="text-danger" ng-show="(base.baseForm.podAppName.$touched || base.baseForm.$submitted )">
                            {{((base.baseForm.podAppName.$error.pattern || base.baseForm.podAppName.$error.required) && '请输入有效服务名 (允许数字、英文字母、下划线与横线 )')
                            || (base.baseForm.podAppName.$error.network && '检查服务名请求异常, ')
                            || (base.baseForm.podAppName.$error.duplicate && '该服务名已存在') || ''}}
                            <a ng-click="service.checkServiceValidate()" ng-show="base.baseForm.podAppName.$error.network">重试</a>
                        </div>
                    </div>
                    <div ng-if="::service.serviceId"  class="form-group">
                        <label>服务名</label>
                        <div>{{::base.podAppName}}</div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-tooltip-group"><i class="fa fa-question"></i>允许数字、英文字母与横线</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-7">
                    <div ng-if="::!service.versionId" class="couple-form-group">
                        <label>应用镜像 <i ng-show="base.verLoading" class="fa-fw fa fa-refresh fa-spin"></i></label>
                        <div ng-if="!base.appImg.imageName_ver" class="couple-form-info">
                            <div class="form-group" style="width: 65%" ng-class="{'has-error': (base.baseForm.appImg.$touched || base.baseForm.$submitted )
                         && base.baseForm.appImg.$error.required}">
                                <ui-select ng-model="base.appImg.imageName" name="appImg" on-select="base.getAppImgVer($select.selected.id)" required>
                                    <ui-select-match placeholder="请选择应用镜像">
                                        <span title="{{$select.selected.imageName}}">{{$select.selected.imageName}}</span>
                                    </ui-select-match>
                                    <ui-select-choices repeat="opt.imageName as opt in service.appImgList | filter: $select.search">
                                        <div ng-bind-html="::opt.imageName"></div>
                                        <small>更新时间 : {{::opt.lastUpdateTime | date:'yyyy-MM-d HH:mm:ss'}}</small>
                                    </ui-select-choices>
                                </ui-select>
                                <div class="text-danger" ng-show="(base.baseForm.appImg.$touched || base.baseForm.$submitted )
                         && base.baseForm.appImg.$error.required">请选择应用镜像
                                </div>
                            </div>
                            <div class="form-group text-only">:</div>
                            <div class="form-group" style="width: 30%" ng-class="{'has-error': (base.baseForm.appImgVer.$touched || base.baseForm.$submitted )
                        && base.baseForm.appImgVer.$error.required}">
                                <select ng-model="base.appImg.ver" name="appImgVer" class="form-control"
                                        ng-options="opt as opt.version for opt in base.appImgVerList" required>
                                    <option value="">请选择版本</option>
                                </select>

                                <div class="text-danger" ng-show="(base.baseForm.appImgVer.$touched || base.baseForm.$submitted )
                         && base.baseForm.appImgVer.$error.required">请选择版本
                                </div>
                            </div>
                        </div>
                        <div ng-if="base.appImg.imageName_ver">{{::base.appImg.imageName_ver}}</div>
                    </div>
                    <div ng-if="::service.versionId" class="form-group">
                        <label>应用镜像</label>
                        <div>{{::base.appImg.imageNameAndVersion}}</div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-tooltip-group"><i class="fa fa-question"></i>指定服务基于哪个应用镜像</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-7">
                    <div class="form-group" ng-class="{'has-error': (base.baseForm.podNum.$touched || base.baseForm.$submitted )
                     && (base.baseForm.podNum.$error.required || base.baseForm.podNum.$error.pattern)}">
                        <label for="podNum">容器数</label>
                        <input type="text" maxlength="10" ng-model="base.podNum" id="podNum" class="form-control"
                               style="width: 48%"
                               name="podNum" placeholder="请输入容器数" ng-pattern="/^\d+$/" required/>

                        <div class="text-danger" ng-show="(base.baseForm.podNum.$touched || base.baseForm.$submitted )
                     && (base.baseForm.podNum.$error.required  || base.baseForm.podNum.$error.pattern)">请输入有效的容器数
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-tooltip-group"><i class="fa fa-question"></i>指定服务默认分配容器个数</div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row-box">
        <div class="row-box-desc">
            <div>挂载卷</div>
        </div>
        <div class="row-box-form">
            <div class="row">
                <div class="col-md-7">
                    <table class="table table-inline-edit margin-bottom-0">
                        <thead>
                        <tr>
                            <th width="30%">卷名字</th>
                            <th width="30%">宿主机路径</th>
                            <th width="30%">挂载路径</th>
                            <th width="10%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="elem in base.volumes">
                            <td ng-class="{'has-error': (base.baseForm['volName'+$index].$touched || base.baseForm.$submitted )
                                && (base.baseForm['volName'+$index].$error.required || base.baseForm['volName'+$index].$error.pattern || base.baseForm['volName'+$index].$error.duplicate)}">
                                <input ng-model="elem.name" name="volName{{$index}}" type="text"
                                       ng-pattern="/^[A-Za-z\d-]+$/"
                                       uib-tooltip="{{((base.baseForm['volName'+$index].$error.required || base.baseForm['volName'+$index].$error.pattern)  && '请输入有效卷名字')
                                       || (base.baseForm['volName'+$index].$error.duplicate && '该卷名字已存在')}}" tooltip-trigger="none" tooltip-class="has-error"
                                       tooltip-is-open="(base.baseForm['volName'+$index].$touched || base.baseForm.$submitted ) && base.baseForm['volName'+$index].$focus
                                           && (base.baseForm['volName'+$index].$error.required || base.baseForm['volName'+$index].$error.pattern
                                           || base.baseForm['volName'+$index].$error.duplicate)"
                                       tooltip-placement="left" ng-focus="base.baseForm['volName'+$index].$focus=true"
                                       ng-blur="base.baseForm['volName'+$index].$focus=false;base.checkVolName($index)" required/>
                            </td>
                            <td ng-class="{'has-error': (base.baseForm['volHostPath'+$index].$touched || base.baseForm.$submitted )
                                && (base.baseForm['volHostPath'+$index].$error.required || base.baseForm['volHostPath'+$index].$error.pattern)}">
                                <input ng-model="elem.hostPath" name="volHostPath{{$index}}" type="text"
                                       ng-pattern="/^(\/[\w-.]+[\/]{0,1})+$/"
                                       uib-tooltip="请输入有效路径" tooltip-trigger="none" tooltip-class="has-error"
                                       tooltip-is-open="(base.baseForm['volHostPath'+$index].$touched || base.baseForm.$submitted ) && base.baseForm['volHostPath'+$index].$focus
                                           && (base.baseForm['volHostPath'+$index].$error.required || base.baseForm['volHostPath'+$index].$error.pattern)"
                                       tooltip-placement="left" ng-focus="base.baseForm['volHostPath'+$index].$focus=true"
                                       ng-blur="base.baseForm['volHostPath'+$index].$focus=false" required/>
                            </td>
                            <td ng-class="{'has-error': (base.baseForm['volMonPath'+$index].$touched || base.baseForm.$submitted )
                                && (base.baseForm['volMonPath'+$index].$error.required || base.baseForm['volMonPath'+$index].$error.pattern)}">
                                <input ng-model="elem.mountPath" name="volMonPath{{$index}}" type="text"
                                       ng-pattern="/^(\/[\w-.]+[\/]{0,1})+$/"
                                       uib-tooltip="请输入有效路径" tooltip-trigger="none" tooltip-class="has-error"
                                       tooltip-is-open="(base.baseForm['volMonPath'+$index].$touched || base.baseForm.$submitted ) && base.baseForm['volMonPath'+$index].$focus
                                           && (base.baseForm['volMonPath'+$index].$error.required || base.baseForm['volMonPath'+$index].$error.pattern)"
                                       tooltip-placement="left" ng-focus="base.baseForm['volMonPath'+$index].$focus=true"
                                       ng-blur="base.baseForm['volMonPath'+$index].$focus=false" required/>
                            </td>
                            <td class="text-center"><a ng-click="base.volRemove($index)" title="删除"><i class="fa fa-trash fa-lg"/></a></td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <a ng-click="base.volAdd()">+ 添加挂载卷</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-5">
                    <div class="form-tooltip-group"><i class="fa fa-question"></i>卷名字: 允许数字、英文字母与横线</div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row-box">
        <div class="row-box-desc">
            <div>日志挂载</div>
        </div>
        <div class="row-box-form">
            <div class="row">
                <div class="col-md-7">
                    <table class="table table-inline-edit margin-bottom-0">
                        <thead>
                        <tr>
                            <th width="30%">日志名字</th>
                            <th width="30%">宿主机路径</th>
                            <th width="30%">挂载路径</th>
                            <th width="10%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="elem in base.logVolumes">
                            <td ng-class="{'has-error': (base.baseForm['logVolName'+$index].$touched || base.baseForm.$submitted )
                                && (base.baseForm['logVolName'+$index].$error.required || base.baseForm['logVolName'+$index].$error.pattern
                                || base.baseForm['logVolName'+$index].$error.duplicate)}">
                                <input ng-model="elem.name" name="logVolName{{$index}}" type="text"
                                       ng-pattern="/^[A-Za-z\d-]+$/"
                                       uib-tooltip="{{((base.baseForm['logVolName'+$index].$error.required || base.baseForm['logVolName'+$index].$error.pattern)  && '请输入有效日志名字')
                                       || (base.baseForm['logVolName'+$index].$error.duplicate && '该日志名字已存在')}}" tooltip-trigger="none" tooltip-class="has-error"
                                       tooltip-is-open="(base.baseForm['logVolName'+$index].$touched || base.baseForm.$submitted ) && base.baseForm['logVolName'+$index].$focus
                                           && (base.baseForm['logVolName'+$index].$error.required || base.baseForm['logVolName'+$index].$error.pattern
                                           || base.baseForm['logVolName'+$index].$error.duplicate)"
                                       tooltip-placement="left" ng-focus="base.baseForm['logVolName'+$index].$focus=true"
                                       ng-blur="base.baseForm['logVolName'+$index].$focus=false;base.checkLogVolName($index)" required/>
                            </td>
                            <td ng-class="{'has-error': (base.baseForm['loghostpath'+$index].$touched || base.baseForm.$submitted )
                                && (base.baseForm['loghostpath'+$index].$error.required || base.baseForm['loghostpath'+$index].$error.pattern)}">
                                <input ng-model="elem.hostPath" name="loghostpath{{$index}}" type="text"
                                       ng-pattern="/^(\/[\w-.]+[\/]{0,1})+$/"
                                       uib-tooltip="请输入有效路径" tooltip-trigger="none" tooltip-class="has-error"
                                       tooltip-is-open="(base.baseForm['loghostpath'+$index].$touched || base.baseForm.$submitted ) && base.baseForm['loghostpath'+$index].$focus
                                           && (base.baseForm['loghostpath'+$index].$error.required || base.baseForm['loghostpath'+$index].$error.pattern)"
                                       tooltip-placement="left" ng-focus="base.baseForm['loghostpath'+$index].$focus=true"
                                       ng-blur="base.baseForm['loghostpath'+$index].$focus=false" required/>
                            </td>
                            <td ng-class="{'has-error': (base.baseForm['logVolPath'+$index].$touched || base.baseForm.$submitted )
                                && (base.baseForm['logVolPath'+$index].$error.required || base.baseForm['logVolPath'+$index].$error.pattern)}">
                                <input ng-model="elem.path" name="logVolPath{{$index}}" type="text"
                                       ng-pattern="/^(\/[\w-.]+[\/]{0,1})+$/"
                                       uib-tooltip="请输入有效路径" tooltip-trigger="none" tooltip-class="has-error"
                                       tooltip-is-open="(base.baseForm['logVolPath'+$index].$touched || base.baseForm.$submitted ) && base.baseForm['logVolPath'+$index].$focus
                                           && (base.baseForm['logVolPath'+$index].$error.required || base.baseForm['logVolPath'+$index].$error.pattern)"
                                       tooltip-placement="left" ng-focus="base.baseForm['logVolPath'+$index].$focus=true"
                                       ng-blur="base.baseForm['logVolPath'+$index].$focus=false" required/>
                            </td>
                            <td class="text-center"><a ng-click="base.logVolRemove($index)" title="删除"><i class="fa fa-trash fa-lg"/></a></td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <a ng-click="base.logVolAdd()">+ 添加日志挂载</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-5">
                    <div class="form-tooltip-group"><i class="fa fa-question"></i>日志名字: 允许数字、英文字母与横线</div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row-box">
        <div class="row-box-desc">
            <div>资源配置</div>
        </div>
        <div class="row-box-form">
            <div class="row">
                <div class="col-md-7">
                    <div class="couple-form-group">
                        <div class="couple-form-info">
                            <div class="form-group" ng-class="{'has-error': (base.baseForm.podCpu.$touched || base.baseForm.$submitted )
                         &&(base.baseForm.podCpu.$error.pattern|| base.baseForm.podCpu.$error.required)}">
                                <label for="podCpu">CPU</label>

                                <div class="input-group">
                                    <input type="text" maxlength="10" ng-model="base.podCpu" class="form-control"
                                           id="podCpu"
                                           name="podCpu" placeholder="请输入CPU核数" ng-pattern="/^\d+(\.\d+)?$/" required/>
                                    <span class="input-group-addon">核</span>
                                </div>
                                <div class="text-danger" ng-show="(base.baseForm.podCpu.$touched || base.baseForm.$submitted )
                         && (base.baseForm.podCpu.$error.pattern|| base.baseForm.podCpu.$error.required)">请输入有效的CPU核数值
                                </div>
                            </div>
                            <div class="form-group text-only">&nbsp;</div>
                            <div class="form-group" ng-class="{'has-error': (base.baseForm.podMem.$touched || base.baseForm.$submitted )
                         && (base.baseForm.podMem.$error.pattern||base.baseForm.podMem.$error.required)}">
                                <label for="podMem">MEM</label>

                                <div class="input-group">
                                    <input type="text" maxlength="10" ng-model="base.podMem" ng-pattern="/^\d+$/"
                                           id="podMem"
                                           class="form-control" name="podMem" placeholder="请输入内存值" required/>
                                    <span class="input-group-addon">MB</span>
                                </div>
                                <div class="text-danger" ng-show="(base.baseForm.podMem.$touched || base.baseForm.$submitted)
                                    && (base.baseForm.podMem.$error.pattern||base.baseForm.podMem.$error.required)">请输入有效的内存值
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-tooltip-group"><i class="fa fa-question"></i>指定服务内Pod 的资源限制</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-7">
                    <div class="form-group">
                        <label>宿主机组</label>
                        <ui-select multiple ng-model="base.groups" name="groups" close-on-select="false">
                            <ui-select-match placeholder="请选择宿主机组">{{$item.groupCode}}</ui-select-match>
                            <ui-select-choices repeat="opt.groupCode as opt in service.groupList | filter: $select.search">
                                <div ng-bind-html="::opt.groupCode"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="form-tooltip-group"><i class="fa fa-question"></i>限制可调度宿主机符合哪些宿主机组</div>
                </div>
            </div>
        </div>
    </div>
</form>